<template>
	<view class="login">
		<view class="title">
			登录
		</view>
		<input class="uni-input fist" v-model="fromLogin.email" placeholder="请输入邮箱" />
		<view class="passwordicos">
			<image src="@/static/image/login/eye.png" v-if="showEye" @click="isbindTop" class="eye" alt="" />
			<image src="@/static/image/login/eyeclose.png" v-if="!showEye" @click="isbindTop" class="eye" alt="" />
			<input class="uni-input " :type="showEye?'text':'password'  " v-model="fromLogin.password"
				placeholder="请输入密码" />
		</view>
		<view class="goPassword" @click="goPassword">
			忘了密码
		</view>
		<button type="primary" class="btn" @click="submit">登录</button>
		<view class="noAccountNumber">暂无账号, <span class="ospan" @click="goEnroll">去注册</span> </view>
		<view class="">
			 {{title }}
		</view>
	</view>
</template>

<script>
	import {
		login
	} from "@/api/login.js";
	import {
		regex
	} from '@/utils/routeInterception.js'
	export default {
		data() {
			return {
				showEye: false,
				regex: new regex(),
				fromLogin: {
					email: "",
					password: ""
				}

			}
		},
		onShow() {
		
		},
		methods: {
			isbindTop() {

				this.showEye = !this.showEye
			},
			verifyTheAccountPassword() {
				let verifyEmail = this.regex.validEmail(this.fromLogin.email)
				let verifyPassword = this.regex.validPwd(this.fromLogin.password)
				console.log(verifyEmail, verifyPassword)
				if (!verifyEmail) {
					uni.showToast({
						icon: "error",
						title: "邮箱不正确",
					});
					return false
				} else {
					return true
				}

			},
			submit() {
				if (this.verifyTheAccountPassword()) {
					login(this.fromLogin).then(res => {
						if (res.code == 200) {
							uni.setStorageSync("token", res.data.tokenStr)
							uni.switchTab({
								url: "/pages/home/home"
							})
						}
					})
				}

			},
			goEnroll() {
				uni.navigateTo({
					url: "/pages/login/enroll"
				})
			},
			goPassword() {
				uni.navigateTo({
					url: "/pages/login/forgotPassword"
				})
			}

		}
	}
</script>

<style lang="scss">
	@import "@/uni.scss";

	.login {
		width: 750rpx;
		height: 100vh;
		margin: 0 auto;
		// background: linear-gradient(240deg, rgba(41, 46, 75, 1) 20%, rgba(24, 27, 44, 0.6) 80%);
		// overflow: hidden;
		height: 100vh;
		background: url("@/static/image/login/loginBgc.png");
		overflow: hidden;

		.uni-input {
			width: 80%;
			height: 80rpx;
			border: 1px solid rgba(255, 255, 255, 0.21);
			backdrop-filter: blur(0px);
			margin: 0 auto;
			padding: 0rpx 5%;
			margin-top: 50rpx;
			color: $app-text-black;
			font-size: 30rpx;
			font-weight: 400;
			border-radius: 4rpx;
			background: $app-input-color;
			backdrop-filter: blur(0px);
		}

		.fist {
			margin-top: 100rpx;
		}

		.btn {
			width: 90%;
			height: 100rpx;
			border-radius: 8rpx;
			margin-top: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $app-bgc-btn;
			color: $app-text-color;
			font-weight: bold;
			&:active{
				opacity: 0.5;
			}
		}

		.noAccountNumber {
			width: 90%;
			margin: 0 auto;
			font-size: 30rpx;
			text-align: center;
			color: $app-text-color-80;
			margin-top: 40rpx;

			.ospan {
				color: $app-text-color;

			}
		}

		.goPassword {
			width: 90%;
			margin: 0 auto;
			text-align: right;
			color: $app-text-color;
			;
			font-size: 28rpx;
			margin-top: 60rpx;

		}
	}

	.uni-input-input {
		padding: 0rpx 2.5%;
	}

	.passwordicos {
		width: 100%;
		margin: 0 auto;
		position: relative;

		.eye {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 80rpx;
			top: 23rpx;
			z-index: 9;
		}
	}

	input:-webkit-autofill {
		/* 禁用浏览器默认的账号保存填充 */
		-webkit-box-shadow: 0 0 0 30px white inset !important;
	}

	.title {
		width: 90%;
		margin: 0 auto;
		opacity: 1;
		/** 文本1 */
		font-size: 70rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		line-height: 41.02rpx;
		color: $app-text-color;
		text-align: left;
		vertical-align: top;
		padding-bottom: 72rpx;
		padding-top: 200rpx;

	}
</style>